<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.areaHeight"
        />
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">数量设置</el-divider>
      </div>
      <el-form-item label="列表行" class="replenish-shown">
        <el-input-number
            size="small"
            :min="5"
            :step="optionsInfo['step'] || 2"
            :max="optionsInfo['maxRow'] || 60"
            @change="handlePatientListTotal"
            v-model="optionsInfo['patientListRow']"
        />
      </el-form-item>
      <el-form-item label="列表列" class="replenish-shown" v-if="false">
        <el-input-number
            :min="5"
            size="small"
            @change="handlePatientListTotal"
            v-model="optionsInfo['patientListCol']"
        />
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">切屏间隔</el-divider>
      </div>
      <el-form-item label="切屏状态">
        <el-switch v-model="optionsInfo['switchState']"/>
      </el-form-item>
      <el-form-item label="切屏间隔" v-if="optionsInfo['switchState']">
        <el-input-number
            :min="1"
            size="small"
            v-model="optionsInfo['switchTime']"
        />
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">接口设置</el-divider>
      </div>
      <el-form-item label="接口状态" class="replenish-shown">
        <el-switch v-model="optionsInfo['ApiState']"/>
      </el-form-item>
      <template v-if="optionsInfo['ApiState']">
        <el-form-item label="接口类型" class="replenish-shown">
          <el-select v-model="optionsInfo['ApiType']" placeholder="请选择" size="small">
            <el-option
                v-for="item in ApiTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="接口地址" class="replenish-shown" v-if="optionsInfo['ApiType']===1">
          <el-input
              v-model="optionsInfo['ApiAddress']"
              size="small"
              placeholder="请输入内容"
          />
        </el-form-item>

        <el-form-item label="号源类型" class="replenish-shown" v-if="!!optionsInfo['apiParams']['registerType']">
          <el-select v-model="optionsInfo['apiParams']['registerType']" placeholder="请选择">
            <el-option
                v-for="item in numberOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item
            label="接口标识"
            v-if="optionsInfo['ApiType']===2"
            class="replenish-shown"
        >
          <el-input
              v-model="optionsInfo['ApiSign']"
              size="small"
              placeholder="请输入内容"
          />
        </el-form-item>
        <!--接口请求频次-->
        <el-form-item label="请求频次(s)" class="replenish-shown">
          <el-input-number
              :min="5"
              size="small"
              v-model="optionsInfo['frequencyApi']"
          />
        </el-form-item>
      </template>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">标题设置</el-divider>
      </div>
      <el-form-item label="字号" class="replenish-shown">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['header']['fontSize']"
        />
      </el-form-item>
      <el-form-item label="字体颜色" class="replenish-shown">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['header']['color']"/>
      </el-form-item>
      <el-form-item label="背景色" class="replenish-shown">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['header']['background']"/>
      </el-form-item>
      <el-form-item label="字体粗细" class="replenish-shown">
        <el-select v-model="optionsInfo['header']['fontWeight']" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">列表设置</el-divider>
      </div>
      <el-form-item class="replenish-shown col-info">
        <div class="options-info row-option">
          <el-checkbox-group v-model="optionsInfo['list']['defaultShowCol']" :disabled="false">
            <Draggable
                class="list-group"
                @end="handleDragEnd"
                :list="optionsInfo['list']['colOptions']"
                :animation="100"
            >
              <el-checkbox
                  v-for="(item,index) in (optionsInfo['list']['colOptions'])"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
              >
                <div class="setting-info">
                  <el-input v-model="item.label" placeholder="请输入内容" size="small"/>
                  <el-input
                      type="number"
                      :min="0.4"
                      :max="7"
                      :step="0.1"
                      :precision="1"
                      size="small"
                      v-model="item.flex" placeholder="请输入列宽"/>
                </div>
                <i class="el-icon-thumb"></i>
              </el-checkbox>
            </Draggable>
          </el-checkbox-group>
        </div>
      </el-form-item>
      <el-form-item label="字号" class="replenish-shown">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['list']['fontSize']"
        />
      </el-form-item>
      <el-form-item label="字体颜色" class="replenish-shown">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo['list']['color']"/>
      </el-form-item>
      <el-form-item label="字体粗细" class="replenish-shown">
        <el-select v-model="optionsInfo['list']['fontWeight']" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </div>

    <div class="list-item-setting" v-if="optionsInfo.layerArea">
      <el-form-item label="启用弹窗">
        <el-switch v-model="optionsInfo.hasOpenLayer" />
      </el-form-item>
      <el-form-item label="启用语音播报">
        <el-switch v-model="optionsInfo.hasOpenVideo" />
      </el-form-item>
      <el-form-item label="消息Key">
        <el-input size="small" v-model="optionsInfo.msgRegisterMark"/>
      </el-form-item>
    </div>

  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import Draggable from "vuedraggable"
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "publishBoard-editor",

  componentName: "publishBoard-editor",

  mixins: [],

  components: {Draggable},

  props: {
    designer: Object,
    optionModel: Object,
    selectedWidget: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      radio: 1,
      screenType: '',
      optionsInfo: Object(),
      constantDic: constantDic,
      ApiTypeOptions: [
        {
          value: 1,
          label: '接口地址'
        },
        {
          value: 2,
          label: '接口标识'
        }
      ],
      numberOptions:[
        {
          value: 1,
          label: '科室号'
        },
        {
          value: 2,
          label: '专家号'
        }
      ],
      predefineColors: types['predefineColors'],
      fontWeightOptions: types['fontWeightOptions'],
    }
  },

  computed: {
    isDisabled() {
      return function (val) {
        let arr = ['OPERATING_ROOM_NO', 'DEPT_CODE', 'NAME', 'SEX', 'WARD_NAME', 'BED_NO', 'STA'];
        return !arr.includes(val);
      }
    },
  },

  methods: {
    handleDragEnd(val) {
      console.log(val)
    },

    handlePatientListTotal(val) {
      let {patientListRow, patientListCol} = this.optionsInfo;
      Reflect.set((this.optionsInfo), 'patientListTotal', (patientListRow * patientListCol));
    }
  },

  watch: {
    optionModel: {
      handler: function (val) {
        let key = (val.config)
        this.optionsInfo = val[key];
      },
      deep: true,
      immediate: true
    }
  }
}
</script>


<style lang="scss" scoped>
.col-info {

  ::v-deep .el-form-item__content {
    margin-left: 1px !important;

    .title {
      width: 100%;
    }

    .el-checkbox__label {
      width: auto;
    }


    .el-icon-thumb {
      position: relative;
      top: 8px;
      padding-left: 10px;
      font-size: 18px;
      text-align: center;
    }

    .el-checkbox {
      width: calc(100% - 32px);
    }
  }

}

.row-option {
  :deep(.el-checkbox) {
    display: flex;
    flex-direction: row;

    .el-checkbox__input {
      display: flex;
      align-self: flex-start;
      align-items: flex-start;
    }

    .el-checkbox__label {
      display: flex;
      flex-direction: row;

      .setting-info {
        display: flex;
        flex-direction: column;

        .el-input {
          width: 100%;
          margin-bottom: 20px;

          input[type="number"] {
            line-height: normal !important;
          }
        }

        .el-input-number {
          width: 100%;
        }

        .el-input__inner {
          padding-right: 0 !important;
        }
      }
    }
  }


}
</style>